<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.js"></script>
  <script src="../js/axios.min.js"></script>
  <script src="../js/api.js"></script>
  <link rel="stylesheet" href="../font/iconfont.css">
  <link rel="stylesheet" href="../css/item.css" />
</head>

<body>
  <div id="box">
    <div id="box_header">
      <div class="header_top">
        <div class="header_top_inner">
          <a href="#">正品保证，免息分期!</a>
          <ul class="header_top_inner_ri">
            <li><a href="./login.html">请登录</a></li>
            <li><a href="./reg.html">注册即送6800元大礼包</a></li>
            <span>|</span>
            <li><a href="./cart.html">购物车</a></li>
            <li>
              <a href="#">客服服务</a>
              <div class="dblock">
                <div>
                  <ul>
                    <li><a href="#">客户顾问</a></li>
                    <li><a href="#">售后维修</a></li>

                    <li><a href="#">帮助中心</a></li>
                    <li><a href="#">办理信用卡</a></li>
                  </ul>
                </div>
                <div>
                  <p>服务专线:400-883-2688</p>
                  <p>外呼号码:020-83931899</p>
                </div>
              </div>
            </li>
            <li><a href="#">会员福利</a></li>
            <span>|</span>
            <li><a href="https://www.wbiao.cn/gwie/">ENGLISH</a></li>
          </ul>
        </div>
      </div>
      <div class="header_search">
        <a href="./index.html"><img src="https://static.wbiao.co/p/pc/images/1/logo-icon.png" alt="" /></a>
        <div>
          <input type="text" placeholder="搜索品牌/系列/型号" />
          <button onclick="searchStrFn()">搜索</button>
        </div>
      </div>
      <!--  -->
      <div class="header_banner">
        <img src="https://image8.wbiao.co/shop/59bcd5f1b07d42f1b69065cab2beea8e.jpg" alt="" width="100%" />
        <div class="header_nav">
          <div class="header_nav_inner">
            <ul>
              <li>
                <a href="#" style="border-bottom: white 3px solid">首页</a>
              </li>
              <li><a href="#">商品</a></li>
              <li><a href="#">男士腕表</a></li>
              <li><a href="#">女士腕表</a></li>
              <li><a href="#">商务休闲</a></li>
              <li><a href="#">运动场合</a></li>
              <li><a href="#">复杂功能</a></li>
            </ul>
            <div><i></i><a href="#">联系商家</a></div>
          </div>
        </div>
        <!--  -->
        <div class="null_box"></div>
        <div class="plist">
          <div class="plist_img"></div>
          <div class="plist_txt"></div>
        </div>
      </div>
    </div>
    <!-- 




     -->
    <div class="fixed_box">
      <ul>
        <li><span class="iconfont icon-gouwuchekong"></span>
          <div>购物车</div>
        </li>
        <li><span class="iconfont icon-shoucangaixinxin"></span>
          <div>我的收藏</div>
        </li>
        <li><span class="iconfont icon-shizhong"></span>
          <div>浏览足迹</div>
        </li>
        <li><span class="iconfont icon-ico"></span>
          <div style="height: 220px; width: 220px; top: -132px;left: -220px;">
            <a href="#">
              <img src="../image/qrcode_02.png" alt="">
              <p>下载万表App</p>
            </a>
          </div>
        </li>
        <li><span class="iconfont icon-huidaodingbuxianxing"></span>
          <div>回到顶部</div>
        </li>
      </ul>
    </div>
    <!-- 



     -->
    <div class="box_bottom">
      <div class="box_bottom_top">
        <div class="box_bottom_top_inner">
          <a href="#"><span class="a_span1"></span>正品保证</a>
          <a href="#"><span class="a_span2"></span>免息分期</a>
          <a href="#"><span class="a_span3"></span>全球联保</a>
          <a href="#"><span class="a_span4"></span>假一赔三</a>
          <a href="#"><span class="a_span5"></span>终身善后</a>
        </div>
      </div>
      <div class="box_bottom_centent">
        <div class="box_bottom_c_i">
          <div class="box_b_c_i_lt">
            <h3>客服电话</h3>
            <p>400-883-2688</p>
            <i>外呼电话</i><i>020-83931899</i>
            <br />
            <a href="#">售后维修</a>
          </div>
          <div class="box_b_c_i_cen">
            <ul>
              <h4>新手指南</h4>
              <li><a href="#">注册新会员</a></li>
              <li><a href="#">购物流程</a></li>
              <li><a href="#">手表小知识</a></li>
              <li><a href="#">退换货流程</a></li>
            </ul>
            <ul>
              <h4>支付</h4>
              <li><a href="#">支付方式</a></li>
              <li><a href="#">分期付款</a></li>
              <li><a href="#">发票说明</a></li>
              <li><a href="#">支付问题</a></li>
            </ul>
            <ul>
              <h4>配送</h4>
              <li><a href="#">包裹签收</a></li>
              <li><a href="#">配送方式</a></li>
              <li><a href="#">配送说明</a></li>
              <li><a href="#">自提流程</a></li>
            </ul>
            <ul>
              <h4>万表保障</h4>
              <li><a href="#">正品保障</a></li>
              <li><a href="#">售后服务</a></li>
              <li><a href="#">价格保护七天</a></li>
              <li><a href="#">退换说明</a></li>
            </ul>
            <ul class="box_b_c_i_cen_last_ul">
              <h4>开放合作</h4>
              <li><a href="#">关于万表</a></li>
              <li><a href="#" style="color: #ccaa7a">商务合作</a></li>
              <li><a href="#">万表声明</a></li>
            </ul>
          </div>
          <div class="box_b_c_i_rt">
            <a href="#">
              <img src="../image/BLI[VN(19NEI`9KBMR9[SS3.png" alt="" width="113px" />
            </a>
          </div>
        </div>
        <div class="box_bottom_bottom">
          <ul>
            <li><a href="#">万表app</a></li>
            <li><a href="#">万表名匠</a></li>
            <li><a href="#">万表二手表</a></li>
            <li><a href="#">新款手表</a></li>
            <li><a href="#">高价回收</a></li>
            <li><a href="#">手表资讯</a></li>
            <li><a href="#">天梭手表</a></li>
            <li><a href="#">网站联盟</a></li>
            <li>
              <a href="#">欧米茄手表</a><a href="#" style="padding: 0px">></a>
            </li>
          </ul>
          <br />
          <p>
            万表网名表商城版权所有2009-2021
            <a href="#">ICP备案证书号:粤ICP备09108738号-2</a>
            <a href="#">营业执照</a>
            网监备案:4401060103141
          </p>
          <p>广州市万表科技股份有限公司地址:广州市番禺区番禺大道北16号</p>
          <p>Copyright 2009-2021 WwW.WBIAO.CN.LTD ALL RIGHT RESERVED.</p>
        </div>
      </div>
      <div class="box_bottom_footer">
        <a href="#"><img src="../image/last_1.png" alt="" /></a>
        <a href="#"><img src="../image/last_2.png" alt="" /></a>
      </div>
    </div>
  </div>
</body>
<script>
  let islogin = localStorage.getItem("wb-name");
  if (islogin) {
    // alert("尊敬的客户:" + islogin);
    $(".header_top_inner_ri>li:eq(0)>a").html(islogin);
  }
  //       接口参数：
  // id  商品的id
  // 使用方式
  // 获取id为1的商品的详情
  let str = new URLSearchParams(location.search);
  let uid = localStorage.getItem("wb-uid");
  let id = str.get("id");
  console.log(id);
  // console.log(id);
  axios.get(detailAPI, { params: { id } }).then((res) => {
    // console.log(res.data.data);
    let obj = res.data.data;
    $(".plist_img").html(`<img src="${obj.pimg}" alt="" width="100%" />`);
    $(".plist_txt").html(`
        <h4>${obj.pdesc}</h4>
        <p>晏妙圆形线条悠长意境设计<a href="#">咨询优惠<a/></p>
        <div class="plist_txt_top">
            <p><span>型号:</span>L8.111.4.71.6</p>
            <p><span>编号:</span>42500</p>
            <p><span>品牌:</span>${obj.pname}</p>
            <p><span>销量:</span>998</p>
        </div>
        <div class="plist_txt_pprice">
            <p>市场价:<i><span>￥</span>${parseInt(obj.pprice) + 3000}</i>
                <strong><span>到手价￥</span>${parseInt(obj.pprice)}</strong>
            </p>
            <p>促销:<span>[满减]</span>每满500减70</p>
        </div>
        <p>配送:<span>(顺丰包邮)17:30前支付，预计1-3个工作日内发货，支持货到付款</span></p>
        <p>承诺:<span>正品保证</span><span>正规发票</span>
            <span>假一赔三</span><span>7天退换</span>
            <span>全球联保</span><span>实体店体验</span>
            <span>闪电发货</span>
        </p>
        <p>服务:<span>万表名匠提供全国联保</span><span>100%正品二手表库</span></p>
        <div class="item_btn">
          <button onclick="subNumFn(this)">-</button>
          <input readonly="readonly" type="text" value="1">
          <button onclick="addNumFn(this)">+</button>
        </div>
        <div class="goshop">立即购买<div>
        <div class="addcart">加入购物车<div>
          `);
    $(".addcart").click(function () {
      // uid  用户id
      //       pid  商品id
      //       pnum  要添加的商品数量
      let pnum = $(".item_btn>:eq(1)").val();
      // console.log(pnum);
      $.get(CartAddAPI, { pid: id, pnum, uid }, function (res) {
        console.log(res);
        location.href = "./cart.html";
      })
    })
  });

  /* 
  
  
  */
  //fixed
  let icon = document.querySelector(".icon-huidaodingbuxianxing");
  let backTop = icon.parentNode
  backTop.onclick = function () {
    document.documentElement.scrollTop = document.body.scrollTop = 0;
  }
  $(".fixed_box_top_a").mouseenter(() => {
    $(".fixed_b_t_hidden").css("display", "block")
  })
  $(".fixed_box_top_a").mouseleave(() => {
    /* setTimeout(() => {
      $(".fixed_b_t_hidden").css("display", "none")
    }, 2000) */
    $(".fixed_b_t_hidden").css("display", "none")
  })


  /* 
  
  
  
  */
  function subNumFn(btn) {
    let pnum = $(btn).next().val();
    if (pnum > 1) {
      $(btn).next().val(pnum - 1);
    }
    console.log(pnum);
  }
  function addNumFn(btn) {
    let pnum = $(btn).prev().val()
    console.log(pnum);
    $(btn).prev().val(parseInt(pnum) + 1);
  }
  function searchStrFn() {
    location.href = `./search.html?name=${$(".header_search input").val()}`
  }

  /* 
  购物车数量
  
  */
  let wb_id = localStorage.getItem("wb-uid")
  if (wb_id) {
    $.get(cartList, { id: wb_id }, function (res) {
      console.log(res.data);
      if (res.data.length == 0) {
        console.log("996");
      } else {
        let num = 0;
        res.data.forEach(e => {
          num += parseInt(e.pnum);
        });
        $('.header_top_inner_ri>li:eq(2)>a').html("购物车(" + num + ")");
        $('.header_top_inner_ri>li:eq(2)>a').css("color", "red");
        $('.fixed_box>ul>li:eq(0)').css("position", "relative");
        $('.fixed_box>ul>li:eq(0)').append("<em></em>")
        $('.fixed_box>ul>li:eq(0)>em').css({ display: "inline-block", color: "white", background: "red", fontSize: "12px", width: "18px", height: "18px", borderRadius: "18px", textAlign: "center", position: "absolute", top: "5px", left: "24px" })
        $('.fixed_box>ul>li:eq(0)>em').html(num);
        console.log($('.fixed_box>ul>li:eq(0)>em'));
      }
    })
  }
</script>

</html>